<!--
author: 何其沆(pooky)
desc: CommissionRange
date: 2021-11-12
-->
<template>
  <div class="commission-range">
    <e-container class="container">
      <a-spin :spinning="loading" tip="Loading...">
        <ETitle v-if="calculationType === 2" title="Existing Clients" />
        <div
          v-if="existingClientsObj.length === 0"
          style="display: flex; flex-direction: column; justify-content: center; align-items: center"
        >
          <NoData fontSize="100px" />
          <span style="color: rgba(107, 121, 142, 0.85)">No Data</span>
        </div>
        <div v-if="existingClientsObj.length !== 0">
          <div v-for="(item, index) in existingClientsObj" :key="index">
            <div class="banner-list">
              <banner class="vw5" title="Year" :subTitle="String(item.paymentYear)" />
              <banner
                class="vw5"
                title="Past Commission Amount (In Total)"
                :subTitle="item.hisAmount + ' ' + item.currencyName"
              />
              <banner class="vw5" title="Current Commission Amount" :subTitle="item.amount + ' ' + item.currencyName" />
              <banner title="Current Commission" :subTitle="item.costMoney + ' ' + item.currencyName" />
            </div>
            <div class="commission-range">
              <div class="commission-range-top">
                <div class="left">Commission Range</div>
                <div class="center">Quota Amount</div>
                <div class="center">Commission Percentage</div>
                <div class="right">Commission</div>
              </div>
              <div v-for="(item2, index2) in item.filterDetails" :key="index2" class="commission-range-list">
                <div class="left">{{ item2.roleSpan }}</div>
                <div class="center">{{ item2.saleMoney }} {{ item2.currencyName }}</div>
                <div class="center">{{ (item2.moneyPercent * 100).toFixed(2) + '%' }}</div>
                <div class="right">{{ item2.costMoney || 0 }} {{ item2.currencyName }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="calculationType === 2">
          <ETitle title="New Clients" style="margin-top: 32px" />
          <div v-if="newClients.length !== 0">
            <div v-for="(item, index) in newClients" :key="index">
              <div class="banner-list">
                <banner class="vw5" title="Date" :subTitle="String(item.costYearMonth)" />
                <banner class="vw5" title="Monthly Quota" :subTitle="item.monthQuota + ' ' + item.currencyName" />
                <banner class="vw5" title="History Settled" :subTitle="item.aCostAmount + ' ' + item.currencyName" />
                <banner
                  class="vw5"
                  title="History Unsettled"
                  :subTitle="item.aUnCostAmount + ' ' + item.currencyName"
                />
                <banner class="vw5" title="Current Amount" :subTitle="item.currentAmount + ' ' + item.currencyName" />
                <banner
                  class="vw5"
                  title="Current Settlement Amount"
                  :subTitle="item.currentCostAmount + ' ' + item.currencyName"
                />
                <banner
                  class="vw5"
                  title="Current Commission"
                  :subTitle="item.currentCommission + ' ' + item.currencyName"
                />
              </div>
              <div class="commission-range">
                <div class="commission-range-top">
                  <div class="left" style="justify-content: flex-end">Quota Amount</div>
                  <div class="center">Commission Percentage</div>
                  <div class="right">Commission</div>
                </div>
                <div v-if="item.filterDetails.length === 0" style="padding: 10px">no current commission</div>
                <div v-for="(item2, index2) in item.filterDetails" :key="index2" class="commission-range-list">
                  <div class="left" style="justify-content: flex-end">
                    {{ item2.quotaAmount }} {{ item2.currencyName }}
                  </div>
                  <div class="center">{{ (item2.moneyPercent * 100).toFixed(2) + '%' }}</div>
                  <div class="right">{{ item2.costMoney || '0.00' }} {{ item2.currencyName }}</div>
                </div>
              </div>
            </div>
          </div>
          <div
            v-if="newClients.length === 0"
            style="display: flex; flex-direction: column; justify-content: center; align-items: center"
          >
            <NoData fontSize="100px" />
            <span style="color: rgba(107, 121, 142, 0.85)">No Data</span>
          </div>
        </div>
      </a-spin>
    </e-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import EContainer from '@/components/EContainer.vue'
import ETitle from '@/components/ETitle.vue'
import NoData from '../../../components/NoData.vue'
import banner from './banner.vue'
import p from '@/api/performance.js'

const route = useRoute()
const existingClientsObj = ref([])
const newClients = ref([])
const loading = ref(false)
const calculationType = ref()
/**
 * 获取数据
 */
const getData = () => {
  loading.value = true
  p.getPermissionRange({
    PaymentNum: route.query.paymentNum
  })
    .then(res => {
      if (res.code === 2000) {
        calculationType.value = res.data.calculationType
        if (res.data.existingClientsPerformance !== null && res.data.existingClientsPerformance.length > 0) {
          res.data.existingClientsPerformance.forEach(item1 => {
            let costMoney = 0
            if (item1.details.length > 0) {
              const arr = []
              item1.details.forEach(item2 => {
                costMoney += item2.costMoney ? item2.costMoney : 0
                item1.costMoney = costMoney

                if (item2.costMoney !== 0) {
                  arr.push(item2)
                }
                item1.filterDetails = arr
              })
            }
          })
          existingClientsObj.value = res.data.existingClientsPerformance
        }
        if (res.data.newClientsPerformance !== null && res.data.newClientsPerformance.length > 0) {
          res.data.newClientsPerformance.forEach(item1 => {
            if (item1.details.length > 0) {
              const arr = []
              item1.details.forEach(item2 => {
                if (item2.costMoney !== 0) {
                  arr.push(item2)
                }
                item1.filterDetails = arr
              })
            }
          })
          newClients.value = res.data.newClientsPerformance
        }
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
onMounted(() => {
  getData()
})
</script>

<style scoped lang="less">
.container {
  width: 100%;
  padding: 32px 24px 24px;
  box-sizing: border-box;
  .banner-list {
    display: flex;
    margin-top: 24px;
    padding-left: 13px;
  }
  .commission-range {
    margin-top: 24px;
    width: 100%;
    border: 1px solid @border-color;
    box-sizing: border-box;
    .commission-range-top {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid @border-color;
      background-color: @bg-color;
      box-sizing: border-box;
      display: flex;
      color: @text-gray;
    }
    .commission-range-list {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid @border-color;
      box-sizing: border-box;
      display: flex;
      color: @black-85p;
      &:last-child {
        border-bottom: none;
      }
    }
    .left,
    .center,
    .right {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .left,
    .center {
      border-right: 1px solid @border-color;
    }
    .left,
    .right {
      padding-left: 12px;
      padding-right: 12px;
    }
    .center,
    .right {
      justify-content: flex-end;
      padding-right: 12px;
    }
  }
  .vw5 {
    margin-right: 5vw;
  }
}
</style>
